<template>
	<view class="userInfo-view">
		<view class="nickname">
			<view class="nickname-desc">
				{{$t('userInfo.userName')}}
			</view>

			<view class="nickname-value">
				{{userInfo.userName}}
			</view>
		</view>

		<view class="avatar" @tap="switchAvatar">
			<view class="avatar-desc">
				{{$t('userInfo.avatar')}}
			</view>

			<image  class="avatar-img" :src="userInfo.avatar" mode=""></image>
		</view>

		<view class="nickname">
			<view class="nickname-desc">
				{{$t('userInfo.nickname')}}
			</view>

			<view class="nickname-value" @tap="show=true">
				{{userInfo.nickName}}
			</view>
		</view>

		<view class="logout" @tap="logout">
			{{$t('userInfo.logout')}}
		</view>

<!--		<view class="logout" @tap="delUser">-->
<!--			{{$t('userInfo.delUser')}}-->
<!--		</view>-->

		<u-modal :show="uShow" confirmColor="#000" @confirm="confirmDelUser" showCancelButton @cancel="uShow=false" @close="uShow=false" closeOnClickOverlay :confirmText="$t('common.confirm')" :cancelText="$t('common.cancel')">
			{{$t('userInfo.hint')}}
		</u-modal>

		<u-modal :show="show" confirmColor="#000" @confirm="confirmPutNickname" showCancelButton @cancel="show=false" @close="show=false" closeOnClickOverlay :confirmText="$t('common.confirm')" :cancelText="$t('common.cancel')">
			<view class="slot-content">
				<input type="text" v-model="nickname" :placeholder="$t('userInfo.pla')" name="" id="">
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env';
	import { putUserInfo } from "@/common/api.js";

	export default {
		data() {
			return {
				userInfo: null,
				show: false,
				nickname: "",
				uShow: false
			}
		},
		methods: {
			//删除账号
			delUser() {
				// console.log("删除账号");
				this.uShow = true;
			},
			// 确认删除账号
			async confirmDelUser() {
				console.log("确认删除账号");
				const res = await putUserInfo({
					delFlag: 2,
					userId: this.userInfo.userId
				});

				console.log(res);
				if(res.code === 200) {
					uni.removeStorageSync("token");
					uni.removeStorageSync("userInfo");
					uni.removeStorageSync("userId");
					uni.removeStorageSync("defAddr");
					uni.redirectTo({
						url:"/pages/login/login"
					});
				}
			},
			logout() {
				uni.removeStorageSync("token");
				uni.removeStorageSync("userInfo");
				uni.removeStorageSync("userId");
				uni.removeStorageSync("defAddr");
				uni.redirectTo({
					url:"/pages/login/login"
				});
			},
			// 修改头像
			switchAvatar() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: API_URL + '/oss/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log((uploadFileRes.data));
								putUserInfo({
									avatar: JSON.parse(uploadFileRes.data).msg,
									userId: this.userInfo.userId
								}).then((res) => {
									console.log(res);
									this.userInfo.avatar = JSON.parse(uploadFileRes.data).msg;
									uni.setStorageSync("userInfo", this.userInfo);
								});
							}
						});
					}
				});
			},
			// 修改昵称
			async confirmPutNickname() {
				this.show = false;
				this.userInfo.nickName = this.nickname;
				uni.setStorageSync("userInfo", this.userInfo);
				const res = await putUserInfo({
					nickName: this.nickname,
					userId: this.userInfo.userId
				});

				console.log(res);
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(this.userInfo);
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("userInfo.title")});
		}
	}
</script>

<style lang="scss" scoped>
	@mixin common {
		// border-top: 2rpx solid #858585;
		border-bottom: 2rpx solid #858585;
		height: 100rpx;
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.avatar {
		@include common;

		.avatar-desc {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
		}

		.avatar-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}
	}

	.nickname {
		@include common;
		padding-right: 20rpx;

		.nickname-desc {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
		}

		.nickname-value {
			width: 60%;
			text-align: right;
			font-family: PingFang SC;
			// font-weight: bold;
			font-size: 35rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.logout {
		height: 80rpx;
		margin: 0 80rpx;
		margin-top: 50rpx;
		border: 5rpx solid #cb2d01;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx;
		color: #cb2d01;
	}
</style>
